<template>
  <div class="card-container" style="height: 600px; overflow-y: auto">
    <div class="sever-info">
      <div>
        <span>物联网卡状态</span><span>{{ statusEum[cardDetail.status] }}</span>
      </div>
      <div>
        <span>私网网段</span><span>{{ cardDetail.privateNetworkSegment }}</span>
      </div>
      <div>
        <span>物联网卡具体状态</span
        ><span>{{ osStatusEum[cardDetail.osStatus] }}</span>
      </div>
      <div>
        <span>实名认证状态</span
        ><span>{{
          cardDetail.certifyStatus == '2' ? '已认证' : '未认证'
        }}</span>
      </div>
      <div>
        <span>APN名称</span><span>{{ cardDetail.apnName }}</span>
      </div>

      <div>
        <span>子卡的ICCID</span><span>{{ cardDetail.iccid }}</span>
      </div>
      <div>
        <span>运营商</span><span>{{ vendorEum[cardDetail.vendor] }}</span>
      </div>

      <div>
        <span>子卡IMSI</span><span>{{ cardDetail.imsi[0] }}</span>
      </div>
      <div>
        <span>子卡MSISDN</span><span>{{ cardDetail.msisdn[0] }}</span>
      </div>

      <div>
        <span>短信功能开通情况</span
        ><span>{{ cardDetail.openSms ? '开通' : '关闭' }}</span>
      </div>
      <div>
        <span>物联网卡IP地址</span><span>{{ cardDetail.ip[0] }}</span>
      </div>
      <div>
        <span>流量类型</span><span>{{ dataTypeEum[cardDetail.dataType] }}</span>
      </div>
      <div>
        <span>周期剩余流量</span><span>{{ cardDetail.periodRestFlow }}</span>
      </div>
      <div>
        <span>定向分组名称</span
        ><span>{{ cardDetail.directionalGroupName }}</span>
      </div>
      <div>
        <span>套餐凭证类型</span><span>{{ cardDetail.credentialType }}</span>
      </div>

      <div>
        <span>周期累计流量</span><span>{{ cardDetail.periodAddFlow }}</span>
      </div>

      <div>
        <span>定向分组ID</span><span>{{ cardDetail.directionalGroupId }}</span>
      </div>
      <div>
        <span>周期短信用量</span><span>{{ cardDetail.periodSmsUse }}</span>
      </div>
      <div>
        <span>自动化规则通知ID</span><span>{{ cardDetail.notifyId }}</span>
      </div>
      <div>
        <span>流量包档位</span><span>{{ cardDetail.dataLevel }}</span>
      </div>
      <div>
        <span>物联网卡关联订单编号</span
        ><span>{{ cardDetail.aliyunOrderId }}</span>
      </div>
      <div>
        <span>资费版本</span><span>{{ cardDetail.aliFee }}</span>
      </div>
      <div>
        <span>激活方式</span
        ><span>{{ activeTypeEum[cardDetail.activeType] }}</span>
      </div>
      <div>
        <span>套餐是否自动续费</span
        ><span>{{ cardDetail.isAutoRecharge ? '是' : '否' }}</span>
      </div>
      <div>
        <span>是否自动复用</span
        ><span>{{ cardDetail.autoLimitResume ? '是' : '否' }}</span>
      </div>
      <div>
        <span>凭证实例ID</span
        ><span>{{ cardDetail.credentialInstanceId }}</span>
      </div>
      <div>
        <span>凭证达量限速阈值</span
        ><span>{{ cardDetail.credentialLimitSpeedThreshold }}</span>
      </div>
      <div>
        <span>套餐到期时间</span><span>{{ cardDetail.expireTime }}</span>
      </div>
      <div>
        <span>阈值流量单位</span><span>{{ cardDetail.flowThresholdUnit }}</span>
      </div>
      <div>
        <span>激活时间</span><span>{{ cardDetail.activeTime }}</span>
      </div>
      <div>
        <span>物联网卡达量停用阈值</span
        ><span>{{ cardDetail.cardLimitStopThreshold }}</span>
      </div>

      <div>
        <span>套餐结算周期</span><span>{{ periodEum[cardDetail.period] }}</span>
      </div>
      <div>
        <span>开户时间</span><span>{{ cardDetail.openAccountTime }}</span>
      </div>
      <div><span>认证方式</span><span>企业认证</span></div>
      <div>
        <span>SIM卡类型</span><span>{{ simTypeEum[cardDetail.simType] }}</span>
      </div>
      <div>
        <span>设备IMEI号</span><span>{{ cardDetail.deviceImei }}</span>
      </div>
      <div>
        <span>物联网卡InstanceId值</span
        ><span>{{ cardDetail.vsimInstanceId }}</span>
      </div>
      <div>
        <span>自动换绑重用</span
        ><span>{{ cardDetail.autoRebindReuse ? '是' : '否' }}</span>
      </div>
      <div>
        <span>套餐凭证</span><span>{{ cardDetail.credentialNo }}</span>
      </div>
      <div>
        <span>凭证达量停用阈值</span
        ><span>{{ cardDetail.credentialLimitStopThreshold }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import {
  activeTypeEum,
  dataTypeEum,
  osStatusEum,
  periodEum,
  simTypeEum,
  statusEum,
  vendorEum,
} from '../../contants/index';

defineProps({
  cardDetail: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss">
.card-container {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.sever-info {
  > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--custom-row-data);
    color: var(--custom-sever-info);

    > span:last-child {
      display: flex;
      align-content: center;
      color: var(--text-color);

      .svg-icon {
        margin-left: 10px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>
